<template>
  <div class="meter">
    <div class="meter-title">{{titleTxt}}</div>
    <div class="meter-box">
        <div :class="meterClassObj" :style="{width:percentage*0.65625/100+'rem'}"></div>
    </div>
    <div :class="fontClassObj">
        {{percentage}}%
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  mounted() {
    this.changeValue();
  },
  props: ["titleTxt", "max", "min", "percentage"],
  data() {
    return {
      meterClassObj: {
        "meter-value": true,
        "meter-success": false,
        "meter-warning": false,
        "meter-error": false,
        "meter-null":false
      },
      fontClassObj: {
        "percent-value": true,
        "percent-success": false,
        "percent-warning": false,
        "percent-error": false,
        "percent-null": false
      }
    };
  },
  watch:{
    //监听双向绑定数据变化  调用handleOn方法  存入localStorage 做到双向绑定
    percentage:{
      handler:function(val, oldVal) {
        this.changeValue()
      },
      deep:true
    }
  },
  methods: {
    changeValue() {
      if(this.percentage==0){
        this.percentStyle("null", "value");
      }else if (this.percentage > this.max) {
        this.percentStyle("error", "value");
      } else if (this.min > this.percentage) {
        this.percentStyle("success", "value");
      } else {
        this.percentStyle("warning", "value");
      }
    },
    percentStyle(str1, str2) {
      for (let index in this.meterClassObj) {
        if (index.indexOf(str1) != -1 || index.indexOf(str2) != -1) {
          this.meterClassObj[index] = true;
        } else {
          this.meterClassObj[index] = false;
        }
      }
      for (let index in this.fontClassObj) {
        if (index.indexOf(str1) != -1 || index.indexOf(str2) != -1) {
          this.fontClassObj[index] = true;
        } else {
          this.fontClassObj[index] = false;
        }
      }
    }
  }
};
</script>

<style scoped>
.meter {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
}
.meter-box {
  width: 126px;
  height: 17px;
  border: 1px solid #046e95;
  border-radius: 5px;
  position: relative;
  margin: 0 5px;
}
.meter-title {
  width: 102px;
  color: #4eb6c1;
  font-size: 13px;
  font-weight: bold;
  text-align: right;
}
.percent-value {
  width: 36px;
  font-size: 13px;
  font-weight: bold;
}
.meter-value {
  position: absolute;
  top: -1px;
  left: -1px;
  bottom: -1px;
  right:-1px;
  border-radius: 5px;
  height: 16px;
}
.meter-null{
  border:none;
}
.percent-null{
  color: #4eb6c1;
}
.meter-success {
  border: 1px solid #01b9ff;
  background: -webkit-linear-gradient(#014b68, #01b9ff); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(#014b68, #01b9ff); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(#014b68, #01b9ff); /* Firefox 3.6 - 15 */
  background: linear-gradient(#014b68, #01b9ff); /* 标准的语法 */
}
.percent-success {
  color: #4eb6c1;
}
.meter-warning {
  border: 1px solid #fff300;
  background: -webkit-linear-gradient(#6b6a0d, #fff300); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(#6b6a0d, #fff300); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(#6b6a0d, #fff300); /* Firefox 3.6 - 15 */
  background: linear-gradient(#6b6a0d, #fff300); /* 标准的语法 */
}
.percent-warning {
  color: #fff300;
}
.meter-error {
  border: 1px solid #ec180c;
  background: -webkit-linear-gradient(#5b0c05, #ec180c); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(#5b0c05, #ec180c); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(#5b0c05, #ec180c); /* Firefox 3.6 - 15 */
  background: linear-gradient(#5b0c05, #ec180c); /* 标准的语法 */
}
.percent-error {
  color: #ec180c;
}
</style>
